<template>
  <div class="p-6">
    <div class="text-slate-300 text-center">
      数据总量:
      <span
        ref="totalCountTarget"
        class="font-[Electronic] text-gradient text-7xl ml-2 mr-2 font-bold"
        >{{ total }}</span
      >
      条记录
    </div>
    <div class="mt-3 flex flex-wrap">
      <div
        class="w-1/3 text-center text-slate-400 text-sm"
        v-for="(item, index) in others"
      >
        {{ item.key }}:
        <span
          :ref="el => { if (el) cityRefs[index] = el as HTMLSpanElement }"
          class="text-[#5DC5EF] text-3xl font-[Electronic]"
        >
          {{ item.value }}
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps, onMounted, watch, computed } from "vue";
import * as echarts from "echarts";
import type { TotalDatas } from "@/api/types";
import { cityMap } from "@/api/types";
import { CountUp } from "countup.js";

const totalCountTarget = ref<HTMLElement | null>();
const cityRefs = ref<HTMLSpanElement[]>([]);

const props = defineProps<{
  data: TotalDatas;
}>();

const total = computed<number>(() => {
  return props.data.total;
});
// { key: string; value: any }  两种写法都可以 { [key: string]: any }
const others = computed<Array<{ key: string; value: any }>>(() => {
  return Object.entries(props.data)
    .filter(([key]) => key !== "total")
    .map(([key, value]) => ({ key: cityMap[key], value }));
});
// const others = computed<Record<string, any>>(() => {
//         return Object.entries(props.data)
//                 .filter(([key]) => key !== "total")
//                 .reduce((acc, [key, value]) => {
//                         acc[cityMap[key]] = value;
//                         return acc;
//                 }, {} as Record<string, any>);
// });
console.log("数据总量", props.data);
onMounted(() => {
  
});

const renderData = () => {
  console.log("数据总量", props.data);
  if (totalCountTarget.value) {
    new CountUp(totalCountTarget.value, total.value).start();
  }
  if (cityRefs.value.length !== 0){
    cityRefs.value.forEach((el, index) => {
    new CountUp(el, others.value[index].value).start();
  });
  }
};

watch(() => props.data, renderData);
</script>
<style scoped lang="scss"></style>
